<template>
  <div style="height: 100%">
    <el-row :gutter="2">
      <el-col :span="4">
        <div>
          <el-row>
            <el-col :span="10">
              <el-input
                size="mini"
                placeholder="搜索"
                type="text"
                v-model="selectInput"
              >
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-button
                size="mini"
                type="primary"
                @click="add"
                style="width: 70px; padding: 7px 5px"
              >
                <span>添加分类</span>
              </el-button>
            </el-col>
            <el-col :span="7">
              <el-upload
                class="upload-demo"
                action="http://localhost:9001/file/upload"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button size="mini" type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-row>
          <el-tree
            ref="tree"
            :data="apiSuiteName"
            :props="defaultProps"
            :filter-node-method="filterNode"
            node-key="id"
            @node-click="handleNodeClick"
            style="
              max-height: 810px;
              overflow-y: auto;
              white-space: pre-wrap !important;
              word-wrap: break-word !important;
            "
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-dialog
          :title="title"
          :visible.sync="importDialogFormVisible"
          width="30%"
        >
          <el-form>
            <el-form-item label="url：" :label-width="formLabelWidth">
              <el-input
                v-model="importUrl"
                autocomplete="off"
                placeholder="请输入导入接口URL"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="basePath：" :label-width="formLabelWidth">
              <el-input
                v-model="basePath"
                autocomplete="off"
                placeholder="请输入导入接口basePath"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="env：" :label-width="formLabelWidth">
              <!-- <el-input
                v-model="dataType"
                autocomplete="off"
                placeholder="请输入数据类型"
                size="mini"
              ></el-input> -->
              <el-select v-model="envId" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in envList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="importDialogFormVisible = false" size="mini"
            >取 消
            </el-button
            >
            <el-button
              type="primary"
              @click="dj()"
              size="mini"
            >确 定
            </el-button
            >
          </div>
        </el-dialog>
        <api-suite-page
          :apiSuiteId.sync="apiSuiteId"
          :apiList.sync="apiList"
          v-show="apiShow"
          v-on:showDetails="showDetails"
        ></api-suite-page>
        <apiDetails
          v-show="apiDetailsShow"
          :apiDetails.sync="apiDetails"
          :envList.sync="envList"
        ></apiDetails>
      </el-col>
    </el-row>
    <add-api-suite-page
      :dialogFormVisible.sync="dialogFormVisible"
      v-on:changeAddSuitePage="ct()"
    ></add-api-suite-page>
  </div>
</template>

<script>
  import ApiSuitePage from "../apiPage/ApiSuitePage";
  import apiDetails from "../apiPage/apiDetails";
  import AddApiSuitePage from "./AddApiSuitePage.vue";

  export default {
    props: {},
    components: {
      apiDetails,
      ApiSuitePage,
      AddApiSuitePage,
    },
    created() {
      this.getApiSuiteTree();
      this.getEnvList();
    },
    watch: {
      selectInput: function (value) {
        console.log("筛选测试")
        this.$refs.tree.filter(value);
      },
      projectId: function (newProjectId) {
        this.getEnvList()
        this.getApiSuiteTree()
        this.apiShow = false;
        this.apiDetailsShow = false;
      },
    },
    data() {
      return {
        envId: "",
        basePath: "",
        envList: [],
        title: "接口导入",
        formLabelWidth: "100px",
        importUrl: "",
        fileName: "",
        apiSuiteId: 0,
        selectInput: "",
        importDialogFormVisible: false,
        dialogFormVisible: false,
        apiShow: false,
        apiDetailsShow: false,
        apiDetails: {
          data: {
            name: "test",
          },
        },
        apiList: {
          data: {
            list: [{}],
          },
        },
        apiSuiteName: [],
        defaultProps: {
          children: "apiList",
          label: "name",
        },
      };
    },
    computed: {
      projectId: function () {
        return this.$store.getters.getProjectId;
      },
    },
    methods: {
      getApiSuiteTree() {
        this.$api
          .apiSuiteTree({projectId: this.projectId})
          .then((res) => {
            this.apiSuiteName = res.data;
            console.log(this.apiSuiteName);
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getEnvList() {
        this.$env
          .list({projectId: this.$store.getters.getProjectId})
          .then((res) => {
            this.envList = res.data;
            console.log(this.envList);
          })
          .catch((err) => {
            console.log(err);
          });
      },
      add() {
        this.dialogFormVisible = true;
      },
      ct() {
        this.dialogFormVisible = false;
        this.getApiSuiteTree();
      },
      dj() {
        this.importDialogFormVisible = false
        console.log(this.envId)
        this.$file
          .fileAnalysis({
            fileName: this.fileName,
            projectId: this.projectId,
            url: this.importUrl,
            envId: this.envId,
            basePath: this.basePath
          })
          .then((res) => {
            if (res.code == 200) {
              this.getApiSuiteTree();
              this.$message({
                showClose: true,
                message: res.message,
                type: "success",
              }).catch((err) => {
                console.log(err);
              });

            }
          });
      },
      showDetails(data) {
        this.apiDetailsShow = true;
        this.apiShow = false;
        this.getEnvList();
        this.$api
          .apiDetails({id: data.id})
          .then((res) => {
            this.apiDetails = res;
            console.log(this.apiDetails.data.name);
          })
          .catch((res) => {
            console.log(res);
          });
      },
      handleNodeClick(data) {
        console.log(data);
        if ("apiList" in data) {
          this.apiShow = true;
          this.apiDetailsShow = false;
          this.apiSuiteId = data.id;
          this.$api
            .apiPage({pageNum: 1, pageSize: 10, apiSuiteId: this.apiSuiteId})
            .then((res) => {
              this.apiList = res;
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.apiDetailsShow = true;
          this.apiShow = false;
          this.getEnvList();
          this.$api
            .apiDetails({id: data.id})
            .then((res) => {
              this.apiDetails = res;
              console.log(this.apiDetails.data.name);
            })
            .catch((res) => {
              console.log(res);
            });
          console.log(data.id);
        }
      },
      handleExceed() {
      },
      handleSuccess(response) {
        if (response.code == 200) {
          // this.$file.fileAnalysis({fileName})
          this.fileName = response.data;
          this.importDialogFormVisible = true;
          this.$message.success(res.message);
        }

        console.log(response);
      },
      filterNode(value, data) {
        console.log(value, data)
        console.log(data.name)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
    },
  };
</script>
